<template>
  <div class="video_list">
    <Banner></Banner>
    <mainContent :catname="title">

      <div slot="menu_list">
        <dl>
          <dt class="menu_dt" :style="{backgroundImage: 'url(' + menu_bg + ')'}">{{title}}</dt>
        </dl>
      </div>


      <div slot="inner_content"
           style="display: flex;justify-content: center;box-sizing: border-box;padding-top: 60px;align-items: center">

        <div class="page_con">
          <!--视频列表-->
          <div class="lt_dynamic">
            <div class="video_list_show">
              <NoData v-if="flag"></NoData>

              <div @click="toVideo2(item.link,item)" class="video_box" v-for="(item,index) in videoList" :key="index">
                <img style="object-fit: cover;width: 100%;height: 100%;" :src="item.thumb"/>
                <p class="video_list_title">{{item.title}}</p>
                <!--<video :src="item.link" class="video-js vjs-default-skin"-->
                <!--controls preload="auto" style="width: 100%;height: 100%;object-fit: cover"-->
                <!--playsinline="true" webkit-playsinline="true"-->
                <!--poster="../../assets/images/video_list/video_img.png">-->
                <!--</video>-->
              </div>
              <!--<div class="video_box"><img style="object-fit: cover;width: 100%;height: 100%;" src="../../assets/images/video_list/video_img.png"/></div>-->
            </div>
          </div>
          <!--视频列表-->
        </div>
      </div>
    </mainContent>
    <footerBar></footerBar>
    <MainMenu></MainMenu>
  </div>
</template>

<script>
  import Banner from '@/components/bannder/Banner'
  import MainMenu from '../../components/mainmenu/MainMenu'
  import footerBar from '../../components/content/footerBar'
  import mainContent from '../../components/content/mainContent'
  import NoData from '../../components/nodata/NoData'

  export default {
    name: "video_list",
    data() {
      return {
        videoList: [],//视频列表
        menu_bg:'',
        title:'',
        flag:false,
      }
    },
    components: {
      Banner,
      MainMenu,
      footerBar,
      mainContent,
      NoData,
    },
    created() {
      this.menu_bg=this.$util.storage.get("menu_bg");
      this.getVideoList();
      this.title=this.$route.query.name;
    },
    methods: {
      getVideoList() {
        let that = this;
        that.$http.get("api/ScreenkApi/getVideos?page=1&limit=10000&type=1", {vollege_id: that.$util.vollege_id}, r => {
          console.log('视频列表：', r.data.data);
          that.videoList = r.data.data;
          if (r.data.data.length==0){
            that.flag=true;
          }

        });
      },//获取视频列表
      toVideo2(url,item) {
        console.log("视频列表:", url);
        this.$util.storage.set("videourl", url);
        this.$router.push('/video2?title='+item.title+'&id=0');
      },//跳转到视频播放页面


    },


  }
</script>

<style scoped>
  .page_con {
    padding: 0px;
  }

  .video_list {
    width: 100vw;
    height: 1080px;
    background: url("../../assets/images/banner/bg_banner1.jpg") center top no-repeat;
  }

  .lt_dynamic {
    box-sizing: border-box;
    height: 670px;
    overflow-y: scroll;
  }

  .video_list_show {
    height: 550px;
    width: 1303px;
    display: flex;
    flex-wrap: wrap;
  }

  .video_box {
    height: 240px;
    width: 300px;
    border-radius: 10%;
    overflow: hidden;
    margin-top: 40px;
    position: relative;
    margin: 5px;
  }

  .video_list_title {
    position: absolute;
    bottom: 0px;
    color: #fff;
    padding: 1px 11px;

    background-color: rgb(0, 0, 0, .5);
    height: 60px;
    text-align: center;
    width: 300px;
    line-height: 47px;
  }


</style>
